<!--
 * @Author: sbotlp
 * @Email: sbotlp@sina.com
 * @Date: 2019-11-21 22:07:35
 * @LastEditTime: 2019-11-24 21:53:19
 * @Description: http://www.sbotlp.com.cn
 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
  <script src="./vue-2.5.13.js"></script>
</head>

<body>
  vue-todo-list
  <br />
  <!-- V 视图层 -->
  <div id="app">
    <div>
      <input type="text" id='txt-title' v-model="title">
      <button id='btn-submit' v-on:click="add">submit</button>
    </div>
    <div>
      <ul id="ul-list" v-if="list.length">
        <li v-for="item in list">{{item}}</li>
      </ul>
    </div>
  </div>
  <script>
    // M 数据层
    const data = {
      title: '',
      list: []
    }
    // VM 视图数据模型层，视图层与数据层之间的桥梁
    const mv = new Vue({
      el: '#app',
      data: data,
      methods: {
        add: function () {
          if (this.title) {
            this.list.push(this.title);
            this.title = '';
          }
        }
      }
    });
  </script>
  <script>
    // 从源码中取出的对应的模板数据, render函数
    /* 
      vue 2.0  支持了预编译
      开发环境： 写模板
      编译打包：webpack
      生成环境：JS

    */
    with(this) { // this 就是 vm
      return ( 
        _c(
          'div', 
          {
            attrs: {
              "id": "app"
            }
          }, 
          [
            _c(
              'div', 
              [
                _c(
                  'input', 
                  {
                    directives: [{
                      name: "model",
                      rawName: "v-model",
                      value: (title),// 双向数据绑定 get
                      expression: "title"
                    }],
                    attrs: {
                      "type": "text",
                      "id": "txt-title"
                    },
                    domProps: {
                      "value": (title) // 双向数据绑定 get
                    },
                    on: {
                      "input": function ($event) {
                        if ($event.target.composing) return;
                        title = $event.target.value // 双向数据绑定 set， vm.title = $event.target.value
                      }
                    }
                  }
                ), 
                _v(" "), // 文本节点，因为标签与标签之间有换行
                _c(
                  'button', 
                  {
                    attrs: {
                      "id": "btn-submit"
                    },
                    on: {
                      "click": add //语法糖 v-on:click 的处理
                    }
                  }, 
                  [_v("submit")]
                )
              ]
            ),
            _v(" "),// 文本节点，因为标签与标签之间有换行
            _c(
              'div', 
              [
                (list.length) ? // 语法糖 v-if 的处理
                _c(
                  'ul', 
                  {
                    attrs: {
                      "id": "ul-list"
                    }
                  }, 
                  _l(  // 语法糖 v-for 的处理
                    (list), 
                    function (item) {
                      return _c('li', [_v(_s(item))])
                    }
                  )
                ) : _e()
              ]
            )
          ]
        )
      )
    }
  </script>
</body>

</html>